<template>
  <j-modal
    :confirmLoading="confirmLoading"
    :forceRender="true"
    :keyboard="false"
    :maskStyle="{'top':'93px','left':'154px'}"
    :title="title"
    :visible="visible"
    :width="width"
    style="top:10%;height: 80%;"
    switchFullscreen
    @cancel="handleCancel">
    <template slot="footer">
      <a-button @click="handleCancel">{{ $t('button.cancel') }}</a-button>
      <a-button v-if="!disableSubmit" :loading="confirmLoading" type="primary" @click="submitCheque">保存</a-button>
      <!--发起多级审核-->
      <!--      <a-button v-if="!checkFlag" @click="handleWorkflow()" type="primary">{{$t('button.startProcess')}}</a-button>-->
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24" class="form-row">
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.chequeSerialNo')">
              <a-input v-decorator="['serialNo']" :style="'width:100%'"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.receiptNo')">
              <a-input v-decorator.trim="[ 'receiptNo' ]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" class="form-row">
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.customer')">
              <a-select v-decorator="[ 'supplierId', validatorRules.supplierId ]" :dropdownMatchSelectWidth="false"
                        optionFilterProp="children" :placeholder="$t('placeholder.pleaseSelectCustomer')" showSearch
                        @change="onChangeOrgan">
                <div slot="dropdownRender" slot-scope="menu">
                  <v-nodes :vnodes="menu" />
                  <a-divider style="margin: 4px 0;" />
                  <div v-if="isTenant" style="padding: 4px 8px; cursor: pointer;"
                       @click="addCustomer" @mousedown="e => e.preventDefault()">
                    <a-icon type="plus" />
                    {{ $t('button.addCustomer') }}
                  </div>
                </div>
                <a-select-option v-for="(item,index) in cusList" :key="index" :value="item.id">
                  {{ item.supplier }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.issueDate')">
              <j-date v-decorator="['issueDate', validatorRules.issueDate]" :show-time="true" :style="'width:100%'"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" class="form-row">
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.chequeNumber')">
              <a-input v-decorator="[
                'chequeNumber',
                validatorRules.chequeNumber
              ]" :placeholder="$t('placeholder.pleaseInputChequeNumber')" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.salesMan')">
              <a-select v-decorator="[ 'handsPersonId' ]" :dropdownMatchSelectWidth="false"
                        optionFilterProp="children" :placeholder="$t('placeholder.pleaseSelectSalesMan')" showSearch>
                <div slot="dropdownRender" slot-scope="menu">
                  <v-nodes :vnodes="menu" />
                  <a-divider style="margin: 4px 0;" />
                  <div v-if="isTenant" style="padding: 4px 8px; cursor: pointer;"
                       @click="addPerson" @mousedown="e => e.preventDefault()">
                    <a-icon type="plus" />
                    {{ $t('button.addHandlePerson') }}
                  </div>
                </div>
                <a-select-option v-for="(item,index) in personList" :key="index" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!--          <a-col :lg="6" :md="12" :sm="24">-->
          <!--            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.salesMan')" data-step="3"-->
          <!--                         :data-title="$t('search.salesMan')"-->
          <!--                         :data-intro="$t('intro.salesMan')">-->
          <!--              <a-select :placeholder="$t('placeholder.pleaseSelectSalesMan')"-->
          <!--                        v-model="personList.value"-->
          <!--                        optionFilterProp="children">-->
          <!--                <a-select-option v-for="(item, index) in personList.options" :key="item.value || item.id || index"-->
          <!--                                 :value="item.value || item.id">-->
          <!--                  {{ item.text || item.label || item.name }}-->
          <!--                </a-select-option>-->
          <!--              </a-select>-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->
        </a-row>


        <a-row :gutter="24" class="form-row">
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.accountName')">
              <a-select v-decorator="[ 'accountId', validatorRules.accountId ]" :dropdownMatchSelectWidth="false"
                        optionFilterProp="children" :placeholder="$t('placeholder.pleaseSelectAccountName')" showSearch>
                <div slot="dropdownRender" slot-scope="menu">
                  <v-nodes :vnodes="menu" />
                  <a-divider style="margin: 4px 0;" />
                  <div v-if="isTenant" style="padding: 4px 8px; cursor: pointer;"
                       @click="addAccount" @mousedown="e => e.preventDefault()">
                    <a-icon type="plus" />
                    {{ $t('button.addAccount') }}
                  </div>
                </div>
                <a-select-option v-for="(item,index) in accountList" :key="index" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.payeeName')">
              <a-select v-decorator.trim="[ 'payeeName' ]"
                        :placeholder="$t('placeholder.pleaseInputPayeeName')"
                        :dropdownMatchSelectWidth="false"
                        showSearch
                        optionFilterProp="children">
                <a-select-option v-for="(item,index) in payeeList" :key="index" :value="item">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" class="form-row">
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.chequeAmount')">
              <a-input v-decorator.trim="[ 'amount', validatorRules.amount ]"
                       :placeholder="$t('message.pleaseInputChequeAmount')"
                       @change="onChangeDiscountMoney" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.chequeBankName')">
              <a-select v-decorator.trim="[ 'bankName' ]"
                        :placeholder="$t('placeholder.pleaseInputBankName')"
                        :dropdownMatchSelectWidth="false"
                        showSearch
                        optionFilterProp="children">
                <a-select-option v-for="(item,index) in bankList" :key="index" :value="item">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" class="form-row">
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.chequePayDate')">
              <j-date v-decorator="['payDate']" :show-time="true" :style="'width:100%'"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.chequeStatus')">
              <a-select v-decorator="['status',validatorRules.status]" :dropdownMatchSelectWidth="false"
                        @change="onChangeStatus">
                <a-select-option v-for="(item,index) in statusList" :key="index" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24" class="form-row">
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.chequeReturnReason')">
              <a-input v-decorator="[ 'returnReason' ]" placeholder="请输入跳票原因"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.remark')">
              <a-textarea v-decorator.trim="[ 'remark' ]" :rows="2"
                          :placeholder="$t('placeholder.pleaseInputRemark')" />
            </a-form-item>
          </a-col>

        </a-row>

        <a-row :gutter="24" class="form-row">
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.billAttachment')">
              <j-upload v-decorator.trim="[ 'fileList',validatorRules.fileList ]" bizPath="financial"></j-upload>
            </a-form-item>
          </a-col>
        </a-row>

      </a-form>
    </a-spin>
    <customer-modal ref="customerModalForm" @ok="customerModalFormOk"></customer-modal>
    <account-modal ref="accountModalForm" @ok="accountModalFormOk"></account-modal>
    <person-modal ref="personModalForm" @ok="personModalFormOk"></person-modal>
    <!--    <workflow-iframe ref="modalWorkflow" @ok="workflowModalFormOk"></workflow-iframe>-->
  </j-modal>
</template>
<script>
import pick from 'lodash.pick'
import CustomerModal from '../../system/modules/CustomerModal'
import AccountModal from '../../system/modules/AccountModal'
import PersonModal from '../../system/modules/PersonModal'
import WorkflowIframe from '@/components/tools/WorkflowIframe'
import {JEditableTableMixin} from '@/mixins/JEditableTableMixin'
import {FinancialModalMixin} from '../mixins/FinancialModalMixin'
import JUpload from '@/components/jeecg/JUpload'
import JDate from '@/components/jeecg/JDate'
import {getAction} from '@api/manage'

export default {
  name: 'ChequeModal',
  mixins: [JEditableTableMixin, FinancialModalMixin],
  components: {
    CustomerModal,
    AccountModal,
    PersonModal,
    WorkflowIframe,
    JUpload,
    JDate,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    }
  },
  data () {
    return {
      title: this.$t('dynamic.operation'),
      width: '1200px',
      disableSubmit: false,
      moreStatus: false,
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 0,
      visible: false,
      prefixNo: 'CHEQ',
      model: {},
      fileList: [],
      fileName: null,
      statusList: [{ id: 0, name: this.$t('status.unRealized') }, { id: 1, name: this.$t('status.realized') }, {
        id: 2,
        name: this.$t('status.checqueReturn')
      }, {id: 3, name: this.$t('status.returnToCustomer')}],
      labelCol: {
        xs: { span: 24 },
        sm: {span: 4}
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: {span: 20}
      },
      refKeys: ['accountDataTable'],
      activeKey: 'accountDataTable',
      accountTable: {
        loading: false,
        dataSource: [],
        columns: []
      },
      confirmLoading: false,
      validatorRules: {
        supplierId: {
          rules: [{ required: true, message: this.$t('message.pleaseSelectCustomer') }]
        },
        issueDate: {
          rules: [{ required: true, message: this.$t('message.pleaseSelectIssueDate') }]
        },
        accountId: {
          rules: [{ required: true, message: this.$t('message.pleaseSelectAccountName') }]
        },
        amount: {
          rules: [{ required: true, message: this.$t('message.pleaseInputChequeAmount') }]
        },
        fileList: {
          rules: [{ required: true, message: this.$t('message.pleaseUploadCheque') }]
        },
        chequeNumber: {
          rules: [{ required: true, message: this.$t('message.pleaseInputChequeNumber') }]
        },
        status: {
          rules: [{ required: true, message: this.$t('message.pleaseInputChequeStatus') }]
        }
      },
      url: {
        add: '/cheque/add',
        edit: '/cheque/update',
        detailList: '/cheque/info'
      },
      payeeList: [],
      bankList: []
    }
  },
  created () {
  },
  methods: {
    //add()调用edit({}),调用完edit()方法之后会自动调用此方法
    editAfter(record) {
      if (this.action === 'add') {
        this.addInit(this.prefixNo)
        this.fileList = []
        this.form.setFieldsValue({
          status: 0
        })
      } else {
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'serialNo', 'receiptNo', 'supplierId', 'handsPersonId', 'payDate', 'remark',
            'accountId', 'issueDate', 'chequeNumber', 'returnReason', 'bankName', 'status', 'amount', 'payeeName'))
        })
        this.$nextTick(() => {
          this.form.setFieldsValue({fileList: this.model.fileName})
        })
      }
      this.initSystemConfig()
      this.initCustomer()
      // this.initCurFinancialPerson()
      this.initSalesman()
      this.initAccount()
      this.initPayeeList()
      this.initBankList()
    },

    //提交单据时整理成formData
    classifyIntoFormData (allValues) {

    },
    onChangeStatus(v) {
      // this.status = v
    },
    submitCheque() {
      const that = this

      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {

          that.confirmLoading = true

          let formData = Object.assign(this.model, values)

          if (this.form.getFieldValue('fileList') && this.form.getFieldValue('fileList').length > 0) {
            formData.fileName = this.form.getFieldValue('fileList')
          } else {

            formData.fileName = ''
          }

          that.request(formData)
          that.confirmLoading = false
          // obj.then((res)=>{
          //   if(res.code === 200){
          //     that.$emit('ok');
          //   }else{
          //     that.$message.warning(res.data.message);
          //   }
          // }).finally(() => {
          //   that.confirmLoading = false;
          //   that.close();
          // })
        }
      })
    },
    addInit(amountNum) {
      getAction('/sequence/buildChequeNumber').then((res) => {
        if (res && res.code === 200) {
          this.model.serialNo = res.data.defaultNumber
          this.form.setFieldsValue({'serialNo': res.data.defaultNumber})
        }
      })
    },
    // 初始化收款人列表
    initPayeeList() {
      getAction('cheque/payeeName/list').then(res => {
        if (res.code === 200) {
          this.payeeList = res.data.rows || []
        }
      })
    },

    // 初始化银行列表
    initBankList() {
      getAction('cheque/bankName/list').then(res => {
        if (res.code === 200) {
          this.bankList = res.data.rows || []
        }
      })
    }
  }
}
</script>
<style scoped>
.action-button {
  margin-bottom: 8px;
}

.gap {
  padding-left: 8px;
}

.textarea-full-width {
  flex-grow: 1;
  min-height: 60px; /* 或者您希望的任何最小高度 */
  width: 100%; /* 确保宽度为100% */
}
</style>